<template>
  <el-dialog :title="dialogTitle" width="550px" :visible.sync="dialogFormVisible">
    <el-form>
      <el-form-item label="设备类型" :label-width="formLabelWidth">
        <el-select v-model="formData.type" :size="formSize" class="form-width" placeholder="请选择">
          <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备名称" :label-width="formLabelWidth">
        <el-input v-model.trim="formData.name" :size="formSize" class="form-width" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="出入口" :label-width="formLabelWidth">
        <el-select v-model="formData.purpose" :size="formSize" class="form-width" clearable placeholder="请选择">
          <el-option v-for="item in deviceUse" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="标段" :label-width="formLabelWidth">
        <el-select
          v-model="formData.bidSection"
          :size="formSize"
          class="form-width"
          clearable
          placeholder="请选择"
          @change="getWorkAreaList(null)">
          <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属工区" :label-width="formLabelWidth">
        <el-select v-model="formData.areaId" :size="formSize" class="form-width" clearable placeholder="请选择">
          <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="Key" :label-width="formLabelWidth">
        <el-input v-model.trim="formData.key" :size="formSize" class="form-width" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="Secret" :label-width="formLabelWidth">
        <el-input v-model.trim="formData.deviceSecret" :size="formSize" class="form-width" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="URL" :label-width="formLabelWidth">
        <el-input v-model.trim="formData.url" :size="formSize" class="form-width" :rows="3" type="textarea" placeholder="请输入" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :size="btnSize" @click="dialogFormVisible = false">取 消</el-button>
      <el-button :size="btnSize" type="primary" @click="submitFormInfo">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import constants from "../../../../util/constants";
import { mapState, mapActions } from "vuex";
import httpInterface from "../../../../util/httpInterface";

export default {
  name: "AddDeviceInfoModel",
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      dialogTitle: "添加设备",
      btnSize: "small",
      formSize: "medium",
      formLabelWidth: "70px",
      deviceList: constants.ENVIRONMENT_DEVICE_TYPE,
      deviceUse: constants.DEVICE_USE,
      workAreaInfo: [],
      formData: {
        type: 1,
        name: "",
        bidSection: "",
        url: "",
        key: "",
        deviceSecret: "",
        areaId: "",
        purpose: "",
      },
      id: null
    }
  },

  computed: {
    ...mapState(["biaoduanList"])
  },

  mounted() {},

  methods: {
    ...mapActions(["selectByBidSection"]),

    show(id) {
      this.dialogFormVisible = true;
      this.id = null;
      this.formData = {
        type: 1,
        name: "",
        bidSection: "",
        url: "",
        key: "",
        deviceSecret: "",
        areaId: "",
        purpose: "",
      };
      if (id) {
        this.dialogTitle = "编辑设备";
        this.id = id;
        this.getDeviceDetails(id);
      } else {
        this.dialogTitle = "添加设备";
      }
    },

    getWorkAreaList(areaId) {
      let _this = this;
      if (!areaId) this.formData.areaId = "";
      this.selectByBidSection({
        bidSection: this.formData.bidSection,
        fn: function (data) {
          _this.workAreaInfo = data;
        }
      })
    },

    getDeviceDetails(id) {
      let params = { id };
      httpInterface.requestGet(this, httpInterface.URL_THIRDPARTY_VEHICLE_DEVICE_DETAILS, params, res => {
        let { success, other } = res.data;
        this.formData = other;
        this.getWorkAreaList(other.areaId);
      }, null)
    },

    verifyFormInfo() {
      let { name, bidSection, key, url, deviceSecret } = this.formData;
      if (!name) {
        this.warningMessage("请输入设备名称");
        return false;
      }
      if (!bidSection) {
        this.warningMessage("请选择标段");
        return false;
      }
      if (!key) {
        this.warningMessage("请输入Key值");
        return false;
      }
      if (!deviceSecret) {
        this.warningMessage("请输入Secret");
        return false;
      }
      if (!url) {
        this.warningMessage("请输入URL");
        return false;
      }
      return true;
    },

    submitFormInfo() {
      if (!this.verifyFormInfo()) return ;
      let { name, type, key, url, deviceSecret, bidSection, areaId, purpose } = this.formData;
      let params = {
        name, key, url, deviceSecret, areaId, purpose,
        bidSection: Number(bidSection),
        type: Number(type)
      };
      if (this.id) params.id = this.id;
      let path = this.id ? httpInterface.URL_THIRDPARTY_VEHICLE_UPDATE : httpInterface.URL_THIRDPARTY_VEHICLE_ADD;

      httpInterface.requestPost(this, path, params, res => {
        let { success } = res.data;
        if (success) {
          this.dialogFormVisible = false;
          this.$parent.getListInfo();
          if (this.id) {
            this.successMessage("编辑成功！");
          } else {
            this.successMessage("添加成功！");
          }
        } else {
          if (this.id) {
            this.errorMessage("编辑失败！");
          } else {
            this.errorMessage("添加失败！");
          }
        }
      }, null, false);
    }
  }
}
</script>

<style scoped lang="scss">
.form-width{
  width: 260px;
  margin-left: 6px;
}

.el-dialog__wrapper >>> .el-dialog__body .el-form{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.el-dialog__wrapper >>> .el-dialog__body .el-form .el-form-item {
  margin: 6px 0 !important;
}

.el-select >>> .el-input--medium .el-input__icon {
  line-height: inherit;
}
</style>
